<template>
  <div class="dashboard-editor-container">
      <el-row v-show="showStateInfo">
          <el-col class="text-center">
              <el-card class="box-card">
                  <div slot="header" class="clearfix">
                      <span>用户状态分布</span>
                  </div>
                  <div class="chart-wrapper">
                      <pie-chart
                          :userAllCount="userAllCount"
                          :userJoinCount="userJoinCount"
                          :userEnsureCount="userEnsureCount"
                          :userInCount="userInCount"
                          :userSplitCount="userSplitCount"/>
                  </div>
              </el-card>
          </el-col>
      </el-row>

      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>新增用户</span>
          </div>
          <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
              <el-table-column label="编号" type="index" align="center" width="60" />
              <el-table-column label="昵称" prop="userNickName" align="center" />
              <el-table-column label="真实姓名" prop="userName" align="center" />
              <el-table-column :formatter="formatSex" label="性别" prop="userSex" align="center" width="80" />
              <el-table-column label="来源" prop="promotion_id" align="center">
                  <template slot-scope="scope">
                      <span>{{ scope.row.promotion_id?'推荐':'-' }}</span>
                  </template>
              </el-table-column>
              <el-table-column label="手机号" prop="userPhone" align="center" />
              <el-table-column label="生日" align="center">
                  <template slot-scope="scope">
                      <span>{{ scope.row.userBirthday }}</span>
                  </template>
              </el-table-column>
              <el-table-column label="所在地" prop="userDomicile" align="center" />
              <el-table-column label="注册时间" align="center" width="180">
                  <template slot-scope="scope">
                      <span>{{ scope.row.createdAt | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
                  </template>
              </el-table-column>
              <el-table-column :formatter="formatStatus" prop="rdd_user_statuses" label="用户状态" align="center" />
          </el-table>
      </el-card>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PieChart from './components/PieChart'
import { fetchUserListAjax } from "@/api/userList";

export default {
  name: 'DashboardAdmin',
  components: {
    PieChart
  },
    computed:{
        ...mapGetters([
            'name',
            'avatar',
            'roles'
        ]),
        showStateInfo(){
            let tmp = false
            if(this.roles[0]==='超级管理员'||this.roles[0]==='管理员'||this.roles[0]==='直营店'||this.roles[0]==='加盟店'){
                tmp = true
            }
            return tmp
        }
    },
  data() {
    return {
      tableKey: 0,
        listLoading: true,
      list: [],
        listQuery: {
            pageNum: 1,
            pageSize: 100000
        },
        userAllCount: 0,
        userJoinCount: 0, //待入厂
        userEnsureCount: 0,//待确认
        userInCount: 0,//待确认
        userSplitCount: 0,//待分配
    }
  },
  methods: {
      async getList() {
          this.listLoading = true;
          try {
              const result = await fetchUserListAjax(this.listQuery);
              if (result.data.code === 0) {
                  this.allList = result.data.data.pageData;
                  this.list = this.allList.slice(0,20);
                  this.handleData()
              }
              this.listLoading = false;
          } catch (err) {
              console.log(err);
              this.listLoading = false;
          }
      },
      handleData() {
        this.userAllCount = this.allList.length
          this.allList.forEach((item)=>{
              let statusList = item.rdd_user_statuses
              if(statusList[0]&&statusList[0].userStatus == 0) {
                  this.userSplitCount ++ ;
              }
              if(statusList[0]&&statusList[0].userStatus == 1) {
                  this.userJoinCount ++ ;
              }
              if(statusList[0]&&statusList[0].userStatus == 2) {
                  this.userEnsureCount ++ ;
              }
              if(statusList[0]&&statusList[0].userStatus == 3) {
                  this.userInCount ++ ;
              }
          })
          console.log(this.userSplitCount)
          console.log(this.userJoinCount)
          console.log(this.userEnsureCount)
          console.log(this.userInCount)
      },
      formatSex(row) {
          return row.userSex == 1 ? "男" : "女";
      },

      formatStatus(row) {
          if (row.rdd_user_statuses.length > 0) {
              const arr = ["待分配", "待入职", "待确认", "在职", "离职"];
              return arr[row.rdd_user_statuses[0].userStatus];
          }
          return '-'
      }
  },
    mounted() {
        this.getList();
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
